html,
body {
	margin: 0%;
	padding: 0%;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0%;
	padding: 0%;
}

.all4 {
	background: url(../img/p4/8.png)no-repeat;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	color: white;
	display: flex;
	flex-flow: column;
	justify-content: space-around;
}

p {
	line-height: 0.6rem;
	margin: 0%;
}

.lan4 {
	font-size: 0.35rem;
    position: relative;
    left: 10%;
    top: -3%;
    opacity: 0.8;
    font-family: cursive;
}

.an6 {
	width: 0.45rem;
	position: relative;
	left: 102%;
	bottom: -29%;
}

.an1 {
	opacity: 0;
	animation: an1 1s 0.5s forwards;
}

@keyframes an1 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
		transform: translateY(-20%);
	}
}

.an2 {
	opacity: 0;
	animation: an2 1s 1.3s forwards;
}

@keyframes an2 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
		transform: translateY(-20%);
	}
}

.an3 {
	opacity: 0;
	animation: an3 1s 2.1s forwards;
}

@keyframes an3 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
		transform: translateY(-20%);
	}
}

.an4 {
	opacity: 0;
	animation: an4 1s 2.9s forwards;
}

@keyframes an4 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
		transform: translateY(-20%);
	}
}

.an5 {
	opacity: 0;
	animation: an5 1s 3.7s forwards;
}

@keyframes an5 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
		transform: translateY(-20%);
	}
}

.an6 {
	animation: an6 1s 4.5s forwards;
}

@keyframes an6 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
		transform: translateX(-1rem);
	}
}

.star-position{
	position: absolute;
}
#star>img{
	opacity: 0;
}
#star>img:nth-of-type(1){
	width: 6.61rem;
    bottom: 0%;
    left: 0%;
}
#star>img:nth-of-type(2){
	width: 3.53rem;
    bottom: 5%;
    left: 28%;
    animation-delay: 1s;
}
#star>img:nth-of-type(3){
	width: 6.12rem;
    bottom: 0%;
    left: 50%;
    margin-left: -3.06rem;
    animation-delay: 1s;
}
